<template>
  <div class="home" v-loading="!models">
    <el-container>
      <el-header style="height: auto">
        <home-header/>
      </el-header>
      <el-container style="width:100%;height:calc(100% - 60px);">
        <el-aside width="350px">
          <el-menu :background-color="'#ffffff42'" router :default-active="$route.path">
            <div
                v-for="(item, index) in models"
                :key="index">
              <el-submenu :index="index+''" v-show="item.children">
                <template #title>
                  <i :class="item.iconCls" style="color: #000000;margin-right: 5px"></i>
                  <span class="el-menu-span">{{ item.name }}</span>
                </template>
                <el-menu-item :index="children.path"
                              v-for="(children, indexj) in item.children"
                              :key="indexj">
                  <span class="el-menu-span">{{ children.name }}</span>
                </el-menu-item>
              </el-submenu>
              <el-menu-item :index="item.path"
                            :key="index" v-show="!item.children">
                <span class="el-menu-span">{{ item.name }}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-aside>
        <el-main style="width:100%;height: 100%;background-color: rgba(255, 255, 255, 0.26);">
          <router-view style="width: 100%;height: 100%;position:relative;"/>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
//头部组件
import HomeHeader from "@/views/home/compoents/HomeHeader";

export default {
  name: "MainPage",
  components: {HomeHeader},
  data() {
    return {
      //api
      api: this.$store.getters.app.api,
      //右侧菜单
      models: []
    }
  },
  async mounted() {
    let models = this.$store.getters.app.routes;
    this.models = this.getModel(models);
    //console.log(this.models,this.$route.path,"pageModels")
  },
  methods: {
    /**
     * 处理右侧菜单数据
     * @param menus
     * @returns {*}
     */
    getModel(menus){
      for(let i = 0;i<menus.length;i++){
        let menu = menus[i];
        if (menu.path == this.$route.path){
          return menus;
        }else if(menu.children){
          let childrenMenu =  this.getModel(menu.children);
          if(childrenMenu){
            return childrenMenu;
          }
        }
      }
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}

.home {
  width: 100%;
  height: 100%;
  position: relative;
}

.homeModel {
  width: 100%;
  height: 100%;
}

.homeModel li {
  width: 300px;
  height: 300px;
  text-align: center;
  line-height: 300px;
  background: #ffffff69;
  border-radius: 150px;
  margin: 10px;
  list-style: none;
  float: left;
}

.homeModel li:hover {
  background: #ffffffb3;
}

.el-aside {
  height: 100%;
}

.el-menu {
  height: 100%;
}

.el-submenu__title {
  font-size: 50px;
}

.el-container {
  width: 100%;
  height: 100%;
}
</style>